<template>
  <div>
    <div class="header">
      <img
        src="@/assets/images/login-bg.png"
        class="head-bg"
        alt=""
      />
      <div class="avatar-box">
        <div class="top-spacer">
          <div class="avatar-border">
            <img
              :src="state.userInfo.avatar"
              alt=""
              class="avatar"
            />
          </div>
          <div class="nickname">{{ state.userInfo.nickname }}</div>
        </div>
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card shadow="never">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="个人资料" name="first">
              <!-- <la-material></la-material>
              <la-editor></la-editor> -->
              <el-form
                ref="passFormRef"
                :model="userFormData"
                label-width="84px"
                :rules="formRules"
              >
                <el-form-item label="头像" prop="avatar">
                  <la-uploader v-model="userFormData.avatar" />
                </el-form-item>
                <el-form-item label="用户名">
                  <el-input v-model="userFormData.username" disabled />
                </el-form-item>
                <el-form-item label="昵称">
                  <el-input v-model="userFormData.nickname" />
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input v-model="userFormData.mobile" />
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="userFormData.email" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleSubmit"
                    >更新资料</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="密码安全" name="second">
              <el-form
                ref="userFormRef"
                :model="passFormData"
                label-width="84px"
                :rules="formRules"
              >
                <el-form-item label="老密码" prop="old_password">
                  <el-input v-model="passFormData.old_password" />
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                  <el-input v-model="passFormData.password" />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirm_password">
                  <el-input v-model="passFormData.confirm_password" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="handleSubmit2"
                    >确认修改</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="12"> </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import api from "@/app/admin/api/index.js";
import { reactive, ref } from "vue";
import userStore from "@/app/admin/store/user";
import feedback from "@/lite/utils/feedback";

const state = reactive({
  userInfo: {},
});

const activeName = ref("first");
const userFormData = reactive({
  id: 0,
  avatar:"",
  username: "",
  nickname: "",
  mobile: "",
  email: "",
});
const passFormData = reactive({});
const passFormRules = reactive({});

const getUserInfo = () => {
  let userInfo = userStore.state.userInfo;
  state.userInfo = userInfo;
  for (const key in userFormData) {
    //@ts-ignore
    userFormData[key] = userInfo[key];
  }
};

// 提交数据
const handleSubmit = async () => {
  await api.admin.update(userFormData);
  feedback.msgSuccess("更新成功");
};
const handleSubmit2 = async () => {
  if (passFormData.password != passFormData.confirm_password) {
    return feedback.msgError("两次密码输入不一致");
  }
  await api.admin.updatePassword(passFormData);
  feedback.msgSuccess("密码修改成功");
};
getUserInfo();
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  background: var(--el-bg-color);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 15px;
  .head-bg {
    width: 100%;
    height: 355px;
  }
  .avatar-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px auto;
    .top-spacer {
      margin-top: -50px;
      text-align: center;
    }
    .avatar-border {
      background-image: linear-gradient(rgb(80, 178, 252), rgb(244, 76, 102));
      border-radius: 50%;
      width: 110px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0px auto;
      .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50px;
      }
    }
    .nickname {
      margin: 15px 0;
      font-weight: bold;
    }
  }
}
.login {
  display: flex;
}
.left {
  background-image: url("https://g.jdycdn.com/app/pc/d71ce0a1864e.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 1000px;
  height: 100vh;
}
.right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 30px;
}
.login-box {
  width: 300px;
}
.login-box .wellcome {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px;
}
.login-box .subtitle {
  color: #999;
  font-size: 10px;
  margin-bottom: 30px;
}
.login-form {
  text-align: center;
}

.login-btn {
  width: 100%;
}
</style>
